<template>
  <BasicTable @register="registerTable">
    <template #tableTitle>
      <Button @click="handleRead" type="primary" v-if="count"> 一键已读 </Button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              // icon: 'clarity:note-edit-line',
              label: '详情',
              onClick: handleEdit.bind(null, record),
            },
            {
              // icon: 'clarity:note-edit-line',
              label: '办理',
              disabled: isDisabled(record),
              onClick: handleManage.bind(null, record),
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <MsgModal @register="registerModal" @success="handleSuccess" />
  <FlowDetail v-model:visible="flowDetailVisible" @success="handleSuccess" ref="flowDetail" />
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  // import { BasicImport } from '/@/components/ImportButton';
  import MsgModal from './MsgModal.vue';
  import { Button } from 'ant-design-vue';
  import FlowDetail from '/@/components/FlowTable/src/components/FlowDetail.vue';

  import { useModal } from '/@/components/Modal';

  import { getOwnPageApi, setOneClickRead, getCountMsgApi } from '/@/api/sys/msg';
  import { columns, searchFormSchema } from './msg.data';

  // import { usePermissionStore } from '/@/store/modules/permission';
  // import { useRouter } from 'vue-router';
  // import { usePermission } from '/@/hooks/web/usePermission';
  // import { useFlowStoreWithout } from '/@/store/modules/flow';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { toJson } from '/@/utils';

  export default defineComponent({
    name: 'MsgManagement',
    components: { FlowDetail, BasicTable, MsgModal, TableAction, Button },
    emits: ['close'],
    setup(_) {
      // const router = useRouter();

      const count = ref(0);

      const { createMessage } = useMessage();

      const flowDetailVisible = ref(false);
      const flowDetail = ref<any>(null);

      const [registerModal, { openModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        api: getOwnPageApi,
        columns,
        formConfig: {
          labelWidth: 70,
          schemas: searchFormSchema,
        },
        useSearchForm: true,

        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
          fixed: 'right',
        },
      });

      function handleEdit(record: Recordable) {
        openModal(true, {
          record,
          isUpdate: true,
        });
      }

      const getMsgCount = async () => {
        count.value = Number(await getCountMsgApi());
      };
      getMsgCount();
      function handleManage(record: Recordable) {
        flowDetailVisible.value = true;
        if (flowDetail.value) {
          console.log('btnItemTemp', record);
          const { leftModuleId, extData } = record;
          const { workItemId, entryId, extendOpenParam = {} } = toJson(extData || {});

          flowDetail.value?.openPage(true, {
            ...record,
            record: {
              WorkItemID: workItemId,
              EntryID: entryId,
              OperationType: extendOpenParam ?? extendOpenParam.operationType,
            },

            moduleId: leftModuleId,
            // 是否已办理
            isCheck: record.msgType == 2 && record.workflowStatus === 9,
          });
        }
      }

      //消息状态等于2，流程状态不等于1,2,7，不能办理
      function isDisabled(record) {
        const { workflowStatus, remindStatus } = record;
        if (
          remindStatus == 2 ||
          (!workflowStatus && workflowStatus != 1 && workflowStatus != 2 && workflowStatus != 7)
        ) {
          return true;
        } else {
          return false;
        }
      }

      const handleRead = async () => {
        await setOneClickRead();
        reload();
        createMessage.success('操作成功');
      };

      function handleSuccess() {
        reload();
      }
      return {
        registerTable,
        registerModal,
        handleEdit,
        handleManage,
        handleSuccess,
        isDisabled,
        handleRead,
        count,
        flowDetail,
        flowDetailVisible,
      };
    },
  });
</script>
